<template>
  <div class="workflow-graph">
    <vue-flow
      v-model="elements"
      :default-viewport="{ zoom: 1 }"
      :fit-view-on-init="true"
      class="graph-container"
    >
      <!-- 背景 -->
      <background pattern-color="#aaa" gap="8" />
      
      <!-- 控制器 -->
      <controls />
      
      <!-- 小地图 -->
      <minimap />
      
      <!-- 自定义节点 -->
      <template #node-custom="nodeProps">
        <custom-node v-bind="nodeProps" />
      </template>
    </vue-flow>

    <!-- 节点配置抽屉 -->
    <el-drawer
      v-model="configDrawer.visible"
      :title="configDrawer.title"
      size="500px"
    >
      <node-config
        v-if="configDrawer.visible"
        :node="configDrawer.node"
        @update="handleNodeUpdate"
      />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import {
  VueFlow,
  Background,
  Controls,
  MiniMap,
  useVueFlow
} from '@vue-flow/core'
import type { Node, Edge } from '@vue-flow/core'
import CustomNode from './nodes/CustomNode.vue'
import NodeConfig from './nodes/NodeConfig.vue'
import type { WorkflowNode, WorkflowEdge } from '@/types/workflow'

const props = defineProps<{
  nodes: WorkflowNode[]
  edges: WorkflowEdge[]
}>()

const emit = defineEmits<{
  (e: 'update:nodes', nodes: WorkflowNode[]): void
  (e: 'update:edges', edges: WorkflowEdge[]): void
}>()

// Vue Flow 实例
const { onNodeClick, onConnect, onEdgesChange, onNodesChange } = useVueFlow()

// 节点配置抽屉
const configDrawer = ref({
  visible: false,
  title: '',
  node: null as WorkflowNode | null
})

// 转换节点数据
const transformNodes = (nodes: WorkflowNode[]): Node[] => {
  return nodes.map(node => ({
    id: node.id,
    type: 'custom',
    position: node.position || { x: 0, y: 0 },
    data: {
      ...node,
      label: node.type
    }
  }))
}

// 转换连接数据
const transformEdges = (edges: WorkflowEdge[]): Edge[] => {
  return edges.map(edge => ({
    id: edge.id,
    source: edge.source,
    target: edge.target,
    animated: true
  }))
}

// 流程图元素
const elements = computed(() => ({
  nodes: transformNodes(props.nodes),
  edges: transformEdges(props.edges)
}))

// 节点点击事件
onNodeClick(({ node }) => {
  configDrawer.value = {
    visible: true,
    title: `配置节点: ${node.data.type}`,
    node: node.data
  }
})

// 连接创建事件
onConnect((params) => {
  const newEdge: WorkflowEdge = {
    id: `e${Date.now()}`,
    source: params.source,
    target: params.target
  }
  emit('update:edges', [...props.edges, newEdge])
})

// 节点变化事件
onNodesChange(({ node, type }) => {
  if (type === 'position' && node) {
    const updatedNodes = props.nodes.map(n => {
      if (n.id === node.id) {
        return {
          ...n,
          position: node.position
        }
      }
      return n
    })
    emit('update:nodes', updatedNodes)
  }
})

// 边变化事件
onEdgesChange(({ edge, type }) => {
  if (type === 'remove' && edge) {
    const updatedEdges = props.edges.filter(e => e.id !== edge.id)
    emit('update:edges', updatedEdges)
  }
})

// 处理节点更新
const handleNodeUpdate = (updatedNode: WorkflowNode) => {
  const updatedNodes = props.nodes.map(node => {
    if (node.id === updatedNode.id) {
      return updatedNode
    }
    return node
  })
  emit('update:nodes', updatedNodes)
  configDrawer.value.visible = false
}

// 监听节点变化
watch(() => props.nodes, () => {
  // 可以在这里添加节点变化的处理逻辑
}, { deep: true })

// 监听边变化
watch(() => props.edges, () => {
  // 可以在这里添加边变化的处理逻辑
}, { deep: true })
</script>

<style>
.workflow-graph {
  width: 100%;
  height: 600px;
  position: relative;
}

.graph-container {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
</style> 